import { h, defineComponent, nextTick } from "vue"

const 取可拖拽dom = node => {
    // console.log(`node 👉`, node)
    let res = node.el
    if (!res) {
        let 子el = node.children[0].el
        res = 子el.parentElement
    }
    return res
}
const addContext = (domElement, context) => (domElement.__draggable_context = context)
const getContext = domElement => domElement.__draggable_context

class ComponentStructure {
    constructor({ nodes: { header, default: defaultNodes, footer }, root, realList }) {
        // console.log(`ComponentStructure root 👉`, root)
        this.defaultNodes = defaultNodes
        this.children = [...header, ...defaultNodes, ...footer]
        this.externalComponent = root.externalComponent
        this.rootTransition = root.transition
        this.tag = root.tag
        this.realList = realList
    }

    get _isRootComponent() {
        return this.externalComponent || this.rootTransition
    }

    render(h, attributes) {
        const { tag, children, _isRootComponent } = this
        const option = !_isRootComponent ? children : { default: () => children }
        // console.log(`tag 👉`, tag)
        // console.log(`attributes 👉`, attributes)
        // console.log(`option 👉`, option)
        return h(tag, attributes, option)
    }

    updated() {
        const { defaultNodes, realList } = this
        defaultNodes.forEach((node, index) => {
            // console.log(`defaultNodes node 👉`, node)
            addContext(取可拖拽dom(node), {
                element: realList[index],
                index,
            })
        })
    }

    // updated() {
    //     const { defaultNodes, realList, tag: rootTag, rootTransition } = this

    //     // if (!可拖拽dom) {
    //     //     let listItemDoms = []
    //     //     // 场景 1：TransitionGroup 场景，直接查找页面中的列表项 DOM
    //     //     // 1. 找到 TransitionGroup 生成的容器 DOM（根据你的 attributes 中的 class 定位，如 "list-group"）
    //     //     const transitionContainer = document.querySelector(".list-group")
    //     //     if (!transitionContainer) return

    //     //     // 2. 获取容器内的所有列表项 DOM（假设列表项是 li，可根据实际标签调整）
    //     //     listItemDoms = Array.from(transitionContainer.querySelectorAll("li"))

    //     //     // 3. 为每个列表项 DOM 挂载 __draggable_context
    //     //     listItemDoms.forEach((dom, index) => {
    //     //         if (dom && realList[index]) {
    //     //             addContext(dom, {
    //     //                 element: realList[index],
    //     //                 index,
    //     //             })
    //     //         }
    //     //     })
    //     // }
    //     defaultNodes.forEach((node, index) => {
    //         console.log(`defaultNodes node 👉`, node)
    //         let 可拖拽dom = 取可拖拽dom(node)
    //         addContext(可拖拽dom, {
    //             element: realList[index],
    //             index,
    //         })
    //     })
    //     // // 需要渲染过渡组件 TransitionGroup ，不直接生成虚拟dom的情况
    //     // nextTick(() => {})
    // }

    getUnderlyingVm(domElement) {
        return getContext(domElement)
    }

    getVmIndexFromDomIndex(domIndex, element) {
        const { defaultNodes } = this
        const { length } = defaultNodes
        const domChildren = element.children
        const domElement = domChildren.item(domIndex)

        if (domElement === null) {
            return length
        }
        const context = getContext(domElement)
        if (context) {
            return context.index
        }

        if (length === 0) {
            return 0
        }
        const firstDomListElement = 取可拖拽dom(defaultNodes[0])
        const indexFirstDomListElement = [...domChildren].findIndex(element => element === firstDomListElement)
        return domIndex < indexFirstDomListElement ? 0 : length
    }
}

export { ComponentStructure }
